<template>
  <div class="canvas-attr">
    <p class="title">画布属性</p>
    <el-form ref="canvasAttrFormRef" :model="canvasAttrForm">
      <el-form-item label="颜色">
        <el-color-picker v-model="canvasStyle.color" size="small" @change="handleChange"></el-color-picker>
      </el-form-item>
      <el-form-item label="不透明度">
        <el-input v-model="canvasStyle.opacity" type="number" class="formInput" @input="handleChange" min="0" max="1" step="0.1"></el-input>
      </el-form-item>
      <el-form-item label="背景色">
        <el-color-picker v-model="canvasStyle.backgroundColor" :predefine="canvasAttrForm.predefineColors" show-alpha size="small" @change="handleChange"></el-color-picker>
      </el-form-item>
      <el-form-item label="字体大小">
        <el-input v-model="canvasStyle.fontSize" type="number" class="formInput" @input="handleChange"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      canvasAttrForm: {
        predefineColors: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', 'rgba(255, 69, 0, 0)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', 'hsla(209, 100%, 56%, 0.73)', '#c7158577']
      }
    }
  },
  computed: {
    ...mapState(['canvasStyleData']),
    canvasStyle() {
      return { ...this.canvasStyleData }
    }
  },
  methods: {
    handleChange() {
      this.$store.commit('setCanvasStyle', this.canvasStyle)
    }
  }
}
</script>

<style lang="less" scoped>
.canvas-attr {
  .title {
    border-bottom: 1px solid #ddd;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    margin: 0;
  }
}
.el-form {
  margin-top: 30px;
  padding: 0 20px;
}

.formInput {
  width: 70px;
  height: 35px;
}

/deep/ .el-form-item__label {
  text-align: left;
  width: auto !important;
}
</style>
